/*
 * @Description: 描述信息
 * @Version: 版本号
 * @Author: xuebao
 * @Date: 2023-12-11 16:22:14
 * @LastEditors: xuebao
 * @LastEditTime: 2023-12-15 13:15:05
 */
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'
import { Dropdown, Switch } from 'antd'
import type { MenuProps } from 'antd'
import styles from './NavHeader.module.less'
import { useStore } from '@/store'
import { removeItem, setItem } from '@/utils/storage'
import Breadcrumb from './BreadCrumb'
import { useEffect } from 'react'
const NavHeader = () => {
  // const collapse = useStore((state) => state.collapse)
  useEffect(() => {
    handleSwitch(isDark)
  }, [])
  const { userInfo, collapse, updateCollapse, updateTheme, isDark } = useStore()
  //控制菜单图标关闭和展开
  const toggleCollapse = () => {
    updateCollapse()
  }

  const items: MenuProps['items'] = [
    {
      key: 'email',
      label: '邮箱:' + userInfo.userEmail,
    },
    {
      key: 'logout',
      label: '退出',
    },
  ]
  const onClick: MenuProps['onClick'] = ({ key }) => {
    if (key === 'logout') {
      removeItem('userInfo')
      location.href = '/login?callback' + encodeURIComponent(location.href)
    }
  }
  const handleSwitch = (isDark: boolean) => {
    if (isDark) {
      //需要添加深色
      document.documentElement.dataset.theme = 'dark'
      document.documentElement.classList.add('dark')
    } else {
      document.documentElement.dataset.theme = 'light'
      document.documentElement.classList.remove('dark')
    }
    updateTheme(isDark)
    setItem('isDark', isDark)
  }
  return (
    <div className={styles.navHeader}>
      <div className={styles.left}>
        <div onClick={toggleCollapse}> {collapse ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}</div>
        {/* <Breadcrumb items={breadList} /> */}
        <Breadcrumb />
      </div>
      <div className='right'>
        <Switch
          checkedChildren='暗黑'
          checked={isDark}
          unCheckedChildren='默认'
          style={{ marginRight: 10 }}
          onChange={handleSwitch}
        />
        <Dropdown menu={{ items, onClick }} trigger={['click']}>
          <span className={styles.nickName}>{userInfo.userName}</span>
        </Dropdown>
      </div>
    </div>
  )
}

export default NavHeader
